<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>symbol引用</title>
    <link rel="stylesheet" href="fontCSS/demo.css">
    <script src="fontJS/iconfont.js"></script>
    <style type="text/css">
        .icon {
            /* 通过设置 font-size 来改变图标大小 */
            width: 1em; height: 1em;
            /* 图标和文字相邻时，垂直对齐 */
            vertical-align: -0.15em;
            /* 通过设置 color 来改变 SVG 的颜色/fill */
            fill: currentColor;
            /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
               normalize.css 中也包含这行 */
            overflow: hidden;
        }
    </style>
</head>
<body>
    <!-- <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-xxx"></use>
    </svg> -->

    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shoucang"></use>
                </svg>
                <div class="name">收藏</div>
                <div class="fontclass">#icon-shoucang</div>
            </li>

            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shoucang1"></use>
                </svg>
                <div class="name">收藏</div>
                <div class="fontclass">#icon-shoucang1</div>
            </li>

            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shoucang2"></use>
                </svg>
                <div class="name">收藏</div>
                <div class="fontclass">#icon-shoucang2</div>
            </li>

            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shoucang3"></use>
                </svg>
                <div class="name">收藏</div>
                <div class="fontclass">#icon-shoucang3</div>
            </li>
        </ul>
    </div>
</body>
</html>